<script setup lang="ts">

</script>

<template>
  <div class="conent">
    <el-card class="box" v-for="item in 99" shadow="hover">
      <div class="box-top">
        <img src="@/assets/user.jpg">
        <el-tag>已启用</el-tag>
      </div>
      <div class="text-base mt-5">SSL证书</div>
      <div class="mt-2 text-#666 text-sm">云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本</div>

    </el-card>
  </div>
</template>
<style lang="scss" scoped>
body,
html {
  background-color: #000
}

.conent {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;

  .box {
    width: 350px;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    font-size: 15px;
    gap: 10px;
    color: #000;
    box-shadow: #999;
    flex-direction: column;
    cursor: pointer;

    &-top {
      display: flex;
      width: 100%;
      justify-content: space-between;
      padding: 0 10px;
      align-items: center;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50px;
      }
    }
  }
}
</style>
